<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html {
      font-size: 62.5%;
    }

    * {
      margin: 0;
      padding: 0;
    }

    body:before {
      content: "";
      position: fixed;
      top: -1rem;
      left: 0;
      right: 0;
      height: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, .8);
      z-index: 100;
    }

    h1 {
      margin: 1rem;
      font-size: 3rem;
    }

    .box {
      width: 60rem;
      height: 30rem;
      position: fixed;
      left: 50%;
      margin-left: -30rem;
      top: 50%;
      margin-top: -15rem;
      font-size: 3rem;
      text-align: center;
      line-height: 30rem;
      background: pink;
      border: 4px solid orange;
      font-weight: bold;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
      transform: scale(0);
      transition: all .3s;
      z-index: 999;
    }

    .img-preview {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .img-preview li {
      list-style: none;
      float: left;
      margin: 1rem;
      border: 1px solid #ccc;
      width: 20rem;
      height: 20rem;
      /* display:table; */
      text-align: center;
      position: relative;
      padding: 2rem;
      box-sizing: border-box;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
      border-radius: .5rem;
    }

    .img-preview img {
      /* display:table-cell; */
      max-width: 100%;
      max-height: 100%;
    }

    .img-preview .btn-delete {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgb(67, 180, 226);
      font-size: 2rem;
      color: white;
      text-decoration: none;
      border-bottom-left-radius: .5rem;
      border-bottom-right-radius: .5rem;
      z-index: 1;
    }

    .img-preview .btn-delete:hover {
      background: rgb(162, 214, 236);
    }

    #btn1 {
      margin: 1rem;
      font-size: 2rem;
      padding: 1rem 5rem;
      font-weight: bold;
      border: 4px solid rgb(236, 236, 236);
      border-radius: .5rem;
      background: linear-gradient(to top, rgb(238, 77, 79), rgb(255, 134, 134));
      cursor: pointer;
      color: white;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
      outline: none;
    }
    #btn1:active{
      background: linear-gradient(to bottom, rgb(238, 77, 79), rgb(255, 134, 134));
      box-shadow: 1px 1px 3px rgba(0, 0, 0, .5) inset;
    }
  </style>
  <script>
    window.onload=function (){
      let oBox=document.querySelector('.box');
      let oM=document.getElementById('m1');
      let oUl=document.getElementById('ul1');
      let oBtn=document.getElementById('btn1');
      let timer;

      //鼠标移入浏览器窗口，上传区域出现，离开上传区域消失
      document.addEventListener('dragover', ev=>{
        clearTimeout(timer);
        oBox.style.transform='scale(1)';
        timer=setTimeout(()=>{
          oBox.style.transform='scale(0)';
        }, 100);

        ev.preventDefault();
      }, false);
      document.addEventListener('drop', ev=>{
        ev.preventDefault();
      }, false);

      //拖拽移入box
      oBox.addEventListener('dragenter', ()=>{
        oBox.innerHTML='释放鼠标提交文件';
      }, false);
      //拖拽离开box
      oBox.addEventListener('dragleave', ()=>{
        oBox.innerHTML='将图片拖拽到此处上传';
      }, false);
      //拖拽经过box
      oBox.addEventListener('drageover', ev=>{

        ev.preventDefault();
      }, false);
      //拖拽释放鼠标
      oBox.addEventListener('drop', ev=>{
        //循环一个一个的文件
        Array.from(ev.dataTransfer.files).forEach(file=>{
          //如果不是图片，就不进行操作
          if(!file.type.startsWith('image')){
            return;
          }
          //创建文件读取
          let reader=new FileReader();
          reader.onload=function(){

            let oLi=document.createElement('li');
            //将file保存给oLi的file属性，以便后面点击上传按钮调取文件信息
            oLi.file=file;
            oLi.innerHTML=`<img src="${reader.result}" alt=""><a href="#" class="btn-delete">删除</a>`;
            let btnDelete=oLi.children[1];
            //删除按钮
            btnDelete.onclick=function(){
              oUl.removeChild(oLi);
            };
            oUl.appendChild(oLi);
          };
          //读取成base64编码
          reader.readAsDataURL(file);
        });

        oBox.innerHTML='将图片拖拽到此处上传';
        ev.preventDefault();
      }, false);

      //上传图片按钮
      oBtn.onclick=function(){
        //AJAX2.0创建formData对象
        let data=new FormData();
        Array.from(oUl.children).forEach(li=>{
          data.append('f1', li.file);
        });

        //创建Ajax对象
        let oAjax=new XMLHttpRequest();
        oAjax.open('POST', 'http://localhost:8080/api', true);
        //监视上传进度
        oAjax.upload.addEventListener('progress', ev=>{
          oM.value=100*ev.loaded/ev.total;
        }, false);
        oAjax.send(data);
        oAjax.onreadystatechange=function(){
          if(oAjax.readyState==4){
            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
              oM.value=0;
              oUl.innerHTML='';
              alert('上传成功');
            }else{
              oM.value=0;
              alert('上传失败');
            }
          }
        };
      };
    };
  </script>
</head>

<body>
  <meter id="m1" value="0" min="0" max="100" style="width:100%;"></meter>
  <h1>拖拽图片上传</h1>
  <div class="box">
    将图片拖拽到此处上传
  </div>

  <ul id="ul1" class="img-preview">
    <!-- <li>
      <img src="../a.png" alt="">
      <a href="#" class="btn-delete">删除</a>
    </li>
    <li>
      <img src="../b.png" alt="">
      <a href="#" class="btn-delete">删除</a>
    </li> -->
  </ul>
  <input type="button" id="btn1" value="上传图片">
</body>

</html>
